/* eslint-disable prettier/prettier */
/* eslint no-unused-vars:0 */
import React from 'react';
import 'antd/dist/antd.css';
import './index.less';
import questionnaireConfig from './../../../config/questionnaireConfig';
import { Row, Form, Radio, Checkbox, Card, Button } from 'antd';

import { Link } from 'react-router-dom';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;

export default class Questionnaire extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            queTreeNode: [],
            questionnaire: [
                {
                    id: '',
                    name: '',
                    description: '',
                    questions: [
                        {
                            id: '',
                            type: '',
                            stem: '',
                            answerContent: {
                                id: '',
                                content: '',
                            }
                        }
                    ]
                }
            ]
        };
    }

    componentWillMount() {
        // const queTreeNode = this.renderQue(questionnaireConfig);
    }

    componentDidMount() {
        this.$post('/questionnaire/questionnaire', {
            id: '4028ca8169e12e720169e12ec05f0001'
        })
            .then((res) => {
                this.setState({
                    questionnaire: res.questionnaire,
                    queTreeNode: this.renderQue(res.questionnaire.questions),
                    
                });
                // this.state.queTreeNode = this.renderQue(res.questionnaire.questions);
				// console.log(res.questionnaire.questions);
                
    //             console.log(this.state.questionnaire.questions);

            })
            .catch((error) => {
                console.log(error);
            });
    }

    handleSubmit = () => {
        this.props.history.push('/admin/SelfCheckingSystem/Result');
    };

    change_radio = (event) => {
    }
    
     renderQue = (data) => {
            return data.map((item) => {
                return (
                    <Card
                        key={item.id}
                        style={{ marginTop: '16px' }}
                        title={item.stem}
                        bordered
                        type="inner">
                        <ul>
                        <Form>
                        {item.type == 1 ? (
                            <RadioGroup 
                             value={item.answerContent[0].id}
                             onChange={this.change_radio}
                            >
                                {item.answerContent
                                    ? item.answerContent.map((item1) => {
                                          return (

                                              <li key={item1.id}>
                                                  <div>
                                                      <Radio value={item1.id}>
                                                           &nbsp;&nbsp;
                                                          {item1.content}
                                                      </Radio>
                                                  </div>
                                              </li>
                                          );
                                      })
                                    : ''}
                            </RadioGroup>
                        ) : (
                            <CheckboxGroup /*onChange={this.change_radio.bind(this, item.id,'checkbox')}*/
                            >
                                {item.answerContent
                                    ? item.answerContent.map((item1) => {
                                          return (
                                              <li key={item1.id}>
                                                  <div>
                                                      
                                                      <Checkbox
                                                          value={item1.id}>
                                                          {item1.content}
                                                      </Checkbox>
                                                  </div>
                                              </li>
                                          );
                                      })
                                    : ''}
                            </CheckboxGroup>
                        )}
                    </Form>
                    </ul>
                    </Card>
                );
            });
        };

    render() {
        // const {getFieldDecorator} = this.props.form;
        return (
            <div className="body">
                <div style={{ marginTop: '20px' }}>
                    <span className="Customize-body">问卷调查</span>
                </div>
                {/*{this.props.children}*/}
                <Row className="Row1">
                    <Card
                        title={this.state.questionnaire.name}
                        bordered="true"
                        headStyle={{ textAlign: 'center', fontSize: '20px' }}>
                        <p
                            style={{
                                fontSize: 14,
                                marginBottom: 16,
                                fontWeight: 500
                            }}>
                            {this.state.questionnaire.description}
                            {this.state.queTreeNode}
                        </p>
                        
                    </Card>
                </Row>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
            </div>
        );
    }
}
